// src/views/user/AdminList.tsx
import { Table, Space, Button, Popconfirm, Modal, Form, Input, Select, Tree, message } from 'antd'
import { useEffect, useMemo, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import {
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons'
import { useAppSelector } from '../../store/hooks'
import { getAdminList, removeAdmin, addAdmin, updateAdmin } from '../../api/admin';
// 导入 menus 菜单路由对应的基础数据
import menus, { IMenuProps } from '../../router/menu'
// 获取 Tree 组件树形结构的数据 +++++
interface ITreeData {
  key: string
  title: string
  children?: ITreeData[]
}
function getTreeData(menus: IMenuProps[]) {
  let arr: ITreeData[] = []
  menus.forEach(item => {
    let obj: ITreeData = {
      key: '',
      title: ''
    }
    if (item.children) {
      obj = {
        key: item.keyid,
        title: item.label,
        children: getTreeData(item.children)
      }
    } else {
      obj = {
        key: item.keyid,
        title: item.label,
      }
    }
    arr.push(obj)
  })
  return arr
}


type AdminListProps = {}
interface DataType {
  adminid: string;
  adminname: number;
  password: string;
  role: number;
  checkedKeys: any[];
}
// 管理员列表 页面
export const AdminList = (props: AdminListProps) => {
  // 管理员列表 数据
  const [adminList, setAdminList] = useState([])
  // 表格分页的相关数据  ++
  const [current, setCurrent] = useState(1) // 页码
  const [pageSize, setPageSize] = useState(5) // 每页显示个数
  // 添加管理员的弹窗控制
  const [addAdminVisible, setAddAdminVisible] = useState(false)

  // 对当前弹窗 使用类型 add 代表添加管理员，update 代表修改 ++++
  const [type, setType] = useState('add')

  // 表格设置规范
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      render: (text, record, index) => {
        return <span>{index + 1}</span>
      }
    },
    {
      title: '账户',
      align: 'center',
      dataIndex: 'adminname'
    },
    {
      title: '角色',
      align: 'center',
      dataIndex: 'role',
      render: text => {
        return text === 2 ? '超级管理员' : '管理员'
      }
    },
    {
      title: '操作',
      align: 'center',
      render: (text, record, index) => {
        return (
          <Space >
            <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => {
              setType('update')
              setAddAdminVisible(true)
              form.setFieldsValue({ // 重置表单
                adminname: record.adminname,
                role: record.role
              })
              setCheckedKeys(record.checkedKeys) // 重置权限
            }} />
            {/* 删除当前管理员操作相关逻辑，需要进行确认操作 ++++ */}
            <Popconfirm
              title="确定删除吗?"
              onConfirm={async () => {
                console.log("删除当前对应的管理员", record);
                await removeAdmin({
                  adminid: record.adminid
                })
                getAdminData()
              }}
              onCancel={() => { }}
              okText="确定"
              cancelText="再想想"
            >
              <Button danger shape="circle" icon={<DeleteOutlined />} />
            </Popconfirm>
          </Space>
        )
      }
    }
  ]

  // 获取管理员列表数据
  const getAdminData = async () => {
    let res = await getAdminList()
    setAdminList(res.data.data)
  }
  // 初始化 发出数据请求 mounted，在 副作用里面，不允许使用 async
  useEffect(() => {
    // 我们可以使用 立即执行函数来操作 async 调用
    getAdminData()
  }, [])

  // 在组件内部调用 外部声明的方法，得到 树形控件 的数据 +++++
  const treeData = getTreeData(menus)
  const [checkedkeys, setCheckedKeys] = useState(['0-0'])
  // 重置表单，可以直接拿到 form 对象进行操作
  const [form] = Form.useForm()
  const onAdd = async (values: any) => {
    // 传统的 Form.item 表单
    if (checkedkeys.length === 0) {
      message.warning('当前用户没有选择任何权限分配')
      return
    }
    values.checkedKeys = checkedkeys
    console.log(values)
    let res = await addAdmin(values)
    if (res.data.code !== '200') {
      message.warning(res.data.message)
      return;
    }

    // 模态框消失， 重置表单，重置权限
    setAddAdminVisible(false) // 模态框消失
    form.setFieldsValue({ // 重置表单
      adminname: '', password: '', role: 1
    })
    setCheckedKeys(['0-0']) // 重置权限
    getAdminData()
  }

  const onUpdate = async (values: any) => {
    // 传统的 Form.item 表单
    if (checkedkeys.length === 0) {
      message.warning('当前用户没有选择任何权限分配')
      return
    }
    values.checkedKeys = checkedkeys
    await updateAdmin(values)
    setAddAdminVisible(false) // 模态框消失
    form.setFieldsValue({ // 重置表单
      adminname: '', password: '', role: 1
    })
    setCheckedKeys(['0-0']) // 重置权限
    getAdminData()
  }



  // 批量删除数据相关
  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中需要删除的数据
  const onSelectChange = (newSelectedRowKeys: any) => { // 点击选中时的数据事件
    console.log(newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys)
  }
  const rowSelection: any = { // 最左侧选择框选项配置的参数
    selectedRowKeys,
    onChange: onSelectChange
  };

  // 拿到当前用户的 权限，对页面中具体的 按钮级别的权限控制   ++++
  const role = useAppSelector(state => state.user.role)
  // 只有用户已经选择了一条数据，我们才显示批量删除
  const showDelectMoreBtn = useMemo(() => {
    return selectedRowKeys.length > 0 && role === 2
  }, [selectedRowKeys, role])

  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      <div style={{ display: 'flex' }}>
        <Button type="primary" onClick={() => {
          // 修改当前状态是 添加管理员 模式 +++
          setType('add')
          setAddAdminVisible(true)
          form.setFieldsValue({ // 重置表单
            adminname: '', password: '', role: 1
          })
          setCheckedKeys(['0-0']) // 重置权限
        }}>添加管理员</Button>

        {showDelectMoreBtn && <Button type="primary" style={{ marginLeft: 20 }} onClick={
          () => {
            // selectedRowKeys 数组，要进行批量删除
            // 单个删除 调用的 是 removeAdmin 这个 promise 封装的方法
            // 一次性删除多个呢？Promise.all 来进行删除
            const removeArr: any = []
            selectedRowKeys.forEach(async item => {
              removeArr.push(removeAdmin({
                adminid: item
              }))
              Promise.all(removeArr).then(res => {
                console.log(res);
                getAdminData()
              })

              // let res = await removeAdmin({
              //   adminid: item
              // })
              // removeArr.push(res);
            })
            // console.log(removeArr);

          }
        }>批量删除</Button>}

      </div>
      {
        role === 2 ? <Table
          dataSource={adminList}
          columns={columns}
          bordered
          scroll={{ y: document.body.offsetHeight - 330 }}
          rowKey='adminid'
          rowSelection={rowSelection}
          pagination={{
            position: ['bottomRight'],
            current,
            pageSize,
            onChange: (page, pageSize) => {
              setCurrent(page)
              setPageSize(pageSize)
            },
            showTotal: (total) => {
              return <span>共有{total}条数据</span>
            },
            showQuickJumper: true,
            pageSizeOptions: [5, 10, 20, 50]
          }}
        /> :
          <Table
            dataSource={adminList}
            columns={columns}
            bordered
            scroll={{ y: document.body.offsetHeight - 330 }}
            rowKey='adminid'
            pagination={{
              position: ['bottomRight'],
              current,
              pageSize,
              onChange: (page, pageSize) => {
                setCurrent(page)
                setPageSize(pageSize)
              },
              showTotal: (total) => {
                return <span>共有{total}条数据</span>
              },
              showQuickJumper: true,
              pageSizeOptions: [5, 10, 20, 50]
            }}
          />
      }




      {/* 添加管理员的弹窗 */}
      <Modal
        title={type === 'add' ? "添加管理员" : "更新管理员信息"}
        open={addAdminVisible}
        footer={null}
        onCancel={() => {
          setAddAdminVisible(false)
          form.setFieldsValue({ // 重置表单
            adminname: '', password: '', role: 1
          })
          setCheckedKeys(['0-0']) // 重置权限
        }}
      >
        <Form name="dynamic_rule" form={form} onFinish={
          type === 'add' ? onAdd : onUpdate
        } initialValues={{
          role: 1
        }}>
          <Form.Item
            name="adminname"
            label="管理员账户"
            rules={[
              {
                required: true,
                message: '请输入管理员账户',
              },
            ]}
          >
            {/* 修改当前用户，不允许修改用户名，主要目的是重设 密码 or 权限 */}
            <Input placeholder="管理员账户" disabled={type === 'update'} />
          </Form.Item>


          {/* 密码就直接使用原始的输入框，如果修改状态下，可以允许不输入，不输入密码代表不修改 */}
          {
            type === "add" ?
              <Form.Item
                name="password"
                label="管理员密码"
                rules={[
                  {
                    required: true,
                    message: '请输入管理员密码',
                  },
                ]}
              >
                <Input type="password" placeholder="密码" />
              </Form.Item> :
              <Form.Item
                name="password"
                label="管理员密码"
              >
                <Input type="password" placeholder="留空代表不修改！" />
              </Form.Item>
          }



          <Form.Item
            name="role"
            label="管理员角色"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select>
              <Select.Option value={1}>管理员</Select.Option>
              <Select.Option value={2}>超级管理员</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="checkedkeys"
            label="管理员权限"
          >
            <Tree
              checkable
              defaultExpandAll
              checkedKeys={checkedkeys}
              treeData={treeData}
              onCheck={(checkedkeys: any) => { setCheckedKeys(checkedkeys) }}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              {type === "add" ? '确认添加' : '确认更新'}
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </Space>
  );
}